<template>
  <view class="appointment-record">
    <view class="order-center-container">
      <up-tabs
        :list="orderTabDict"
        :lineWidth="`25% - ${rpx2px(22)}px`"
        :line-height="rpx2px(11)"
        @tap="handleRecordTabClick"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      />
      <view class="list" v-if="recordListData.length > 0">
        <up-list @scrolltolower="scrollToLower">
          <up-list-item v-for="(item, index) in recordListData" :key="index">
            <record-item
              :record-item="item"
              @cancel-btn-click="handleCancelBtnClick"
            />
          </up-list-item>
        </up-list>
      </view>
      <none-data v-else />
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import recordItem from "@/package_kuafu_apartment/pages/my/components/record-item/index.vue";
import { rpx2px } from "@/utils/utils";
import { onLoad } from "@dcloudio/uni-app";
import {
  cancelSubscribeApi,
  getAppointmentRecordsApi,
} from "@/package_kuafu_apartment/pages/api/appointment-records";

const handleCancelBtnClick = async (recordItem) => {
  const { recordId: id } = recordItem;
  const res = await cancelSubscribeApi(id);
  const { code } = res;
  if (code === 200) {
    await uni.showToast({
      title: "撤销成功",
      duration: 2000,
      success: () => {
        recordListData.value = [];
        curPage.value = 1;
        getAppointmentRecords();
      },
    });
  }
};

// tab菜单字典
const orderTabDict = ref([
  {
    name: "预约看房",
    value: 0,
  },
  {
    name: "预约保洁",
    value: 1,
  },
  {
    name: "预约维修",
    value: 2,
  },
  {
    name: "预约活动",
    value: 3,
  },
]);

const checkStatusMap = [
  {
    text: "审核中",
    iconType: "warning",
  },
  {
    text: "未通过",
    iconType: "error",
  },
  {
    text: "已通过",
    iconType: "success",
  },
  {
    text: "已撤销",
    iconType: "info",
  },
];
/** TODO 添加分野参数
 */
// 订单数据列表
const recordListData = ref([]);
const handleRecordTabClick = (item) => {
  curPage.value = 1;
  let tabName;
  /* #ifdef MP-WEIXIN */
  tabName = item?._relatedInfo?.anchorRelatedText;
  /* #endif */

  /* #ifndef MP-WEIXIN */
  tabName = item.name;
  /* #endif */

  if (tabName !== "预约看房") {
    recordListData.value = [];
  } else {
    getAppointmentRecords();
  }
};
const scrollToLower = () => {
  console.log(listTotal.value);
  if (listTotal.value > curPageSize.value * curPage.value) {
    curPage.value++;
    getAppointmentRecords();
  }
};
const curPage = ref(1);
const curPageSize = ref(10);
const listTotal = ref(0);
const getAppointmentRecords = async () => {
  await uni.showLoading({
    title: "订单加载中...",
  });
  const params = {
    page: curPage.value,
    pageSize: curPageSize.value,
  };
  const res = await getAppointmentRecordsApi(params);
  const { code, data } = res;
  if (code === 200) {
    listTotal.value = data?.total;
    let list = data?.records?.map((records) => {
      return {
        recordId: records.id,
        tagText: records.checkStatusName,
        tagType: checkStatusMap.find(
          (status) => status.text === records.checkStatusName
        ).iconType,
        recordItemName: records.smallHouseTypeName,
        recordHouseName: records.smallHouseTypeName,
        recordItemTime: records.subscribeTime,
        auditOpinion: records.auditOpinion,
      };
    });
    recordListData.value.push(...list);
    uni.hideLoading();
  }
};
onLoad(() => {
  getAppointmentRecords();
});
</script>
<style scoped lang=less>
@import "./style/appointment-records";
</style>
